<template>
	<view class="address_book_details">
		<view class="address_book_details_user">
			<view class="address_book_details_user_left">
				<image :src="photoUrl" mode="" style="width: 128rpx;height: 128rpx;"></image>
			</view>
			<view class="address_book_details_user_right">
				{{model.realName}}
				<image src="../../static/usercenter/woman.png" mode=""
					style="width: 32rpx;height: 32rpx;vertical-align:middle;margin-left: 10rpx;" v-if="model.gender">
				</image>
				<image src="../../static/usercenter/man.png" mode=""
					style="width: 32rpx;height: 32rpx;vertical-align:middle;margin-left: 10rpx;" v-else>
				</image>
				<block v-if="isOnDutyEnabled">
					<uni-tag :inverted="true" text="在岗" type="success" size="small" style="margin-left:20rpx"
						v-if="model.onDuty"></uni-tag>
					<uni-tag :inverted="true" text="离岗" type="error" size="small" style="margin-left:20rpx"
						v-else></uni-tag>
				</block>
			</view>
		</view>
		<view class="address_book_details_body">
			<view class="address_book_details_body_box">
				<view class="address_book_details_body_box_label">
					手机
				</view>
				<view class="address_book_details_body_box_value">
					{{model.mobile}}
				</view>
			</view>
			<view class="address_book_details_body_box">
				<view class="address_book_details_body_box_label">
					邮箱
				</view>
				<view class="address_book_details_body_box_value">
					{{model.email || ''}}
				</view>
			</view>
			<view class="address_book_details_body_box">
				<view class="address_book_details_body_box_label">
					部门
				</view>
				<view class="address_book_details_body_box_value">
					{{model.deptName || ''}}
				</view>
			</view>
		</view>
		<view class="address_book_details_btn">
			<view class="address_book_details_btn_item" @click="handleSend" v-if="isInnerEmailEnabled && model.mobile">
				<image src="../static/msg.png" style="width: 24px; height: 24px; margin-right: 10rpx" />发消息
			</view>
			<view class="address_book_details_btn_item" v-if="model.mobile" @click="handleCall">
				<image src="../static/mobile.png" style="width: 24px; height: 24px; margin-right: 10rpx" />打电话
			</view>
		</view>
	</view>
</template>
<script>
	import {
		Api
	} from "@/utils/Api.js";
	import {
		postFormAction
	} from '@/utils/request';
	export default {
		data() {
			return {
				model: {
					mobile: '',
				},
				photoUrl: '',
				isInnerEmailEnabled: false,
				isOnDutyEnabled: false,
			};
		},
		async onLoad(options) {
			console.log("options", options)
			this.isInnerEmailEnabled = options.isInnerEmailEnabled;
			this.isOnDutyEnabled = options.isOnDutyEnabled;
			if (this.model.photo) {
				// 不加public在企业微信手机端中会报“非法访问”，而PC端则不会
				this.photoUrl = Api.baseUrl + '/public/showImg.do?path=' + this.model.photo;
			}

			let r = JSON.parse(decodeURIComponent(options.record));
			this.model = JSON.parse(decodeURIComponent(options.record));

			let that = this;
			postFormAction("/mobile/getAddrPropPermitted", {
				userName: this.model.name
			}).then(res => {
				console.log('postAction res', res);
				that.$set(this.model, 'mobile', res.data.mobile || '');
			});
		},
		onShow() {},
		methods: {
			handleSend() {
				const record = {
					id: this.model.id,
					realName: this.model.realName,
					name: this.model.id,
				}
				uni.navigateTo({
					url: `/cmn/internalEmail/writebox/index?addressBookDetails=${JSON.stringify(record)}`
				})
			},
			handleCall() {
				if (!this.model.mobile) {
					uni.showToast({
						title: '号码不能为空',
						icon: 'none'
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber: this.model.mobile,
					success(res) {
						console.log("拨打成功", res)
					},
					fail() {
						console.log("拨打失败", res)
					}
				})
			}
		}
	};
</script>

<style>
	page {
		height: 100%;
		background: rgb(239, 239, 239);
	}
</style>
<style lang="scss" scoped>
	.address_book_details {
		padding: 0 20rpx;

		&_user {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			&_right {
				margin-left: 20rpx;
			}
		}

		&_body {
			background-color: #fff;
			border-radius: 12rpx;
			margin-top: 20rpx;
			padding: 0 24rpx;

			&_box {
				display: flex;
				align-items: center;
				padding: 20rpx 0;

				&:not(:last-child) {
					border-bottom: 1px solid rgb(228, 228, 228);
				}

				&_label {
					width: 150rpx;
				}

				&_value {
					flex: 1;
				}
			}
		}

		&_btn {
			display: flex;
			justify-content: space-around;
			margin-top: 40rpx;

			&_item {
				border: none;
				background-color: #fff;
				width: 260rpx;
				height: 80rpx;
				border-radius: 12rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>